<template>
  <div class="common-layout">
    <el-container>
      <el-header style="padding: 0">
        <el-menu :default-active="activeMenuKey" mode="horizontal" @select="handleSelect">
          <el-menu-item index="0">SILLY 管理平台</el-menu-item>
          <el-space>
            <el-text size="large" type="warning">【模拟用户:</el-text>
            <el-select-v2
                v-model="userId"
                filterable
                placeholder="当前模拟用户"
                class="select-user"
                :options="userArr"
                size="large"
                @change="setCurrentUserId($event)"
            >
            </el-select-v2>
            <el-text size="large" type="warning">】</el-text>
          </el-space>

          <div class="flex-grow"/>
          <el-menu-item index="1">控制中心</el-menu-item>
          <el-menu-item index="2">流程绘制</el-menu-item>
          <el-menu-item index="3">业务编排</el-menu-item>
          <el-menu-item index="4">数据看板</el-menu-item>
          <el-sub-menu index="5">
            <template #title>流程管理</template>
            <el-menu-item index="5-1">流程模型</el-menu-item>
            <el-menu-item index="5-2">流程定义</el-menu-item>
            <el-menu-item index="5-3">流程实例</el-menu-item>
          </el-sub-menu>
          <el-space>
            <el-popconfirm title="确认要退出登录？" @confirm="logout" width="200">
              <template #reference>
                <el-button type="danger" plain>退出登录</el-button>
              </template>
            </el-popconfirm>
          </el-space>
          <el-sub-menu index="6">
            <template #title>Workspace2</template>
            <el-menu-item index="6-1">item2 one</el-menu-item>
            <el-menu-item index="6-2">item2 two</el-menu-item>
            <el-menu-item index="6-3">item2 three</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-header>
      <el-container class="base-container-height" v-show="activeMenuKey === '0'">
        <el-container>
          <el-main class="my-container">
            <el-card>
              <h3 style="text-align: center;">
                <a style="margin: 0 auto" href="https://gitee.com/iqiny/silly" target="_blank">===== SILLY工具源码
                  =====</a>
              </h3>
              <h3 style="text-align: center;">
                <a href="https://www.yuque.com/u32053479/cgy6lz/tto1f2ww5igxyg5g?singleDoc#" target="_blank">=====
                  SILLY工具说明 =====</a>
              </h3>
            </el-card>
          </el-main>
        </el-container>
      </el-container>
      <el-container class="base-container-height" v-show="activeMenuKey === '1'">
        <el-aside width="250px" style="height: 100%; overflow-x: hidden">
          <el-menu
              :default-active="activeViewKey"
              @select="activeViewKey = $event"
              :router="true"
          >
            <template v-for="(menu, ind) in menuArr">
              <template v-if="menu.children && menu.children.length > 0">
                <el-sub-menu :index="menu.path">
                  <template #title>
                    <span :title="menu.name">{{
                        "(" + (ind + 1) + ") " + menu.name
                      }}</span>
                  </template>
                  <template v-for="(mu, i) in menu.children">
                    <el-menu-item :index="mu.path">
                      <template #title>
                        <span :title="mu.name">{{ "(" + (i + 1) + ") " + mu.name }}</span>
                      </template>
                    </el-menu-item>
                  </template>
                </el-sub-menu>
              </template>
              <template v-else
              ><!--二级菜单-->
                <el-menu-item :index="menu.path">
                  <template #title>
                    <span :title="menu.name">{{
                        "(" + (ind + 1) + ") " + menu.name
                      }}</span>
                  </template>
                </el-menu-item>
              </template>
            </template>
          </el-menu>
        </el-aside>
        <el-container>
          <el-main class="my-container">
            <el-card>
              <router-view></router-view>
            </el-card>
          </el-main>
        </el-container>
      </el-container>

      <el-container class="base-container-height" v-if="activeMenuKey === '2'">
        <el-container>
          <el-main class="my-container">
            <el-card :class="{ fullScreen: fullScreen }">
              <span>引擎选择：</span>
              <el-popconfirm
                  title="确认要修改引擎类型？确认修改当前绘制信息将丢失！！！"
                  width="310"
                  @confirm="selectBpmnType = bpmnType"
                  @cancel="bpmnType = selectBpmnType"
              >
                <template #reference>
                  <el-radio-group v-model="bpmnType" class="el-button-group">
                    <el-radio-button label="activiti" value="activiti"/>
                    <el-radio-button label="flowable" value="flowable"/>
                    <el-radio-button label="camunda" value="camunda"/>
                  </el-radio-group>
                </template>
              </el-popconfirm>
              <el-divider direction="vertical"/>
              <el-link :underline="false">
                <el-icon title="全屏">
                  <FullScreen @click="SetFullScreen"/>
                </el-icon>
              </el-link>
              <el-divider direction="vertical"/>
              <silly-bpmn v-if="selectBpmnType"
                          :key="selectBpmnType"
                          :engine="selectBpmnType"
                          :canvas-height="canvasHeight"
              ></silly-bpmn>
            </el-card>
          </el-main>
        </el-container>
      </el-container>

      <el-container class="base-container-height" v-show="activeMenuKey === '3'">
        <el-container>
          <el-main class="my-container">
            <el-card>
              <silly-category-schema-form></silly-category-schema-form>
            </el-card>
          </el-main>
        </el-container>
      </el-container>

      <el-container class="base-container-height" v-if="activeMenuKey === '4'">
        <el-container>
          <el-main class="my-container">
            <el-card>
              <data-board></data-board>
            </el-card>
          </el-main>
        </el-container>
      </el-container>

      <el-container class="base-container-height" v-if="activeMenuKey === '5-1'">
        <el-container>
          <el-main class="my-container">
            <el-card>
              <model-manager></model-manager>
            </el-card>
          </el-main>
        </el-container>
      </el-container>
      <el-container class="base-container-height" v-if="activeMenuKey === '5-2'">
        <el-container>
          <el-main class="my-container">
            <el-card>
              <definition-manager></definition-manager>
            </el-card>
          </el-main>
        </el-container>
      </el-container>
      <el-container class="base-container-height" v-if="activeMenuKey === '5-3'">
        <el-container>
          <el-main class="my-container">
            <el-card>
              <instance-manager></instance-manager>
            </el-card>
          </el-main>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import {useUserStore, useCategoryStore, useUserOptionStore} from "@/core/common/StorageUtil";
import {ref, watch} from "vue";
import {storeToRefs} from "pinia";
import SillyCategorySchemaForm from "@/components/schema/SillyCategorySchemaForm.vue";
import DataBoard from "@/components/databoard/index.vue";
import SillyBpmn from "@/components/bpmn/SillyBpmn.vue";
import ModelManager from "@/components/process/ModelManager.vue";
import DefinitionManager from "@/components/process/DefinitionManager.vue";
import InstanceManager from "@/components/process/InstanceManager.vue";
import {logout} from "@/core/api/service";
import {FullScreen} from "@element-plus/icons-vue";

const user = useUserStore();
const {userArr, userId} = storeToRefs(user);
const setCurrentUserId = user.setUserId;

const categoryStore = useCategoryStore();
const {categoryArr} = storeToRefs(categoryStore);

const userOptionStore = useUserOptionStore();

const menuArr = ref<any>([]);
for (let index = 0; index < categoryArr.value.length; index++) {
  const element = categoryArr.value[index];
  menuArr.value.push({
    path: `/home/${element["category"]}`,
    name: element["processDesc"],
  });
}

categoryStore.$subscribe((mutation, state) => {
  menuArr.value.length = 0;
  for (let index = 0; index < state.categoryArr.length; index++) {
    const element = state.categoryArr[index];
    menuArr.value.push({
      path: `/home/${element["category"]}`,
      name: element["processDesc"],
    });
  }
});

const fullScreen = ref(false);
const canvasHeight = ref('calc(100vh - 180px)');
const activeViewKey = ref("/home/" + categoryStore.activeCategory()?.category);
const {activeMenuKey} = storeToRefs(userOptionStore);
const bpmnType = ref<string>(userOptionStore.selectBpmnType);
const selectBpmnType = ref<string>(userOptionStore.selectBpmnType);

watch(bpmnType, (n, o) => {
  userOptionStore.setSelectBpmnType(n);
})
watch(activeMenuKey, (n, o) => {
  userOptionStore.setActiveMenuKey(n);
})

function handleSelect(key: string, keyPath: string[]) {
  activeMenuKey.value = key;
}

const SetFullScreen = () => {
  fullScreen.value = !fullScreen.value;
  canvasHeight.value = fullScreen.value ? 'calc(100vh - 70px)' : 'calc(100vh - 180px)';
}
</script>

<script lang="ts">
export default {
  name: "BasicLayout",
};
</script>

<style scoped>
.common-layout {
  background-color: #e6e8eb;
  border-radius: 4px;
  overflow: hidden;
}

.base-container-height {
  height: calc(100vh - 76px);
}

.my-container {
  padding: 10px;
}

.flex-grow {
  flex-grow: 1;
}

.select-user {
  margin: 7px auto;
  width: 300px;
}

.fullScreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1000; /* Ensure it's above other content */
}

.fullScreen .containerBox #canvas {
  height: calc(100vh - 50px) !important;
  border: 1px solid rgb(121, 121, 121);
}
</style>
